import React from "react";
import { render } from "react-dom";
import Display from "./components/display";
import Keyboard from "./components/keyboard";

const styles = {
  fontFamily: "sans-serif",
  width: "414px",
  height: "628px",
  display: 'flex',
  flexDirection: 'column'
};
export class App extends React.PureComponent {
    constructor(){
      super();
      this.state = {
        displayNum: '0',
        lastDisplayNum: null,
        cal: {
          "+": false,
          "-": false,
          "x": false,
          "÷": false,
          "=": false
        }
      }
    }
    
    componentDidMount() {
        
    }

    inputHandle(numStr) {
      let displayNum = '';
      if (this.state.displayNum !== '0') {
        displayNum = this.state.displayNum;
      }
      for (let key in this.state.cal){
        if (this.state.cal[key] && !this.state.lastDisplayNum){
          if (key !== '='){
            this.setState({
              lastDisplayNum: this.state.displayNum
            });
          }
          displayNum = ''
          break;
        }
      }
      if (displayNum.length >= 10){
        return;
      }
      this.setState({
        displayNum: displayNum + numStr
      });
    }

    featureHandle(feature) {
      if (feature === 'C') {
        this.setState({
          displayNum: '0',
          lastDisplayNum: null,
          cal: {
            "+": false,
            "-": false,
            "x": false,
            "÷": false,
            "=": false
          }
        });
      }else if (feature === '=') {
        this.calculate();
        let cal = {
          "+": false,
          "-": false,
          "x": false,
          "÷": false,
          "=": true
        };
        this.setState({
          cal: cal
        });
      }else if (feature === '+' || feature === '-' || feature === 'x' || feature === '÷') {
        this.calculate();
        let cal = {
          "+": false,
          "-": false,
          "x": false,
          "÷": false,
          "=": false
        };
        cal[feature] = true;
        this.setState({
          cal: cal
        });
      }
    }

    calculate(){
      if (!this.state.lastDisplayNum){
        return;
      }
      let result = 0;
      for (let key in this.state.cal){
        if (this.state.cal[key]){
          if (key === '+'){
            result = parseInt(this.state.lastDisplayNum, 10) + parseInt(this.state.displayNum, 10);
          }else if (key === '-'){
            result = parseInt(this.state.lastDisplayNum, 10) - parseInt(this.state.displayNum, 10);
          }else if (key === 'x'){
            result = parseInt(this.state.lastDisplayNum, 10) * parseInt(this.state.displayNum, 10);
          }else if (key === '÷') {
            result = parseInt(this.state.lastDisplayNum, 10) / parseInt(this.state.displayNum, 10);
            result = Math.round(result);
          }
          break;
        }
      }
      console.log(result);
      this.setState({
        displayNum: result + '',
        lastDisplayNum: null,
        cal: {
          "+": false,
          "-": false,
          "x": false,
          "÷": false
        }
      });
    }

    render() {
        return (
          <div style={styles}>
            <Display 
              result={this.state.displayNum}
            />
            <Keyboard 
              clicked={this.state.cal}
              inputHandle={this.inputHandle.bind(this)}
              featureHandle={this.featureHandle.bind(this)}
            />
          </div>
        );
    }
}

render(<App />, document.getElementById("root"));